<template>
  <div class="header_hot">
    <div class="hot_name">
      <!-- <span class="line"></span> -->
      <div>
        <img src="@/assets/img/zs-09.png" alt="">
      </div>
      <el-divider class="divider"></el-divider>
      <!-- <h2 class="hot_posts"> 热门职位</h2> -->
      <!-- <h2 class="hot_posts"> 退役军人、军人家属招聘专区</h2> -->
      <!-- <span class="line"></span> -->
    </div>
    <div class="tabs">
      <!-- <el-tabs v-model="activeName">
        <el-tab-pane v-for="(item, key, index) in companyList" :label="key" :value="item.code" :key="index"
          :name="JSON.stringify(item.orderNo)">
          <div class="company_position">
            <div class="company_position_info" v-for="(jobFairOutVoList, index) in companyList[key]" :key="index"
              @click="jobToDetais(jobFairOutVoList)">
              <div class="job_logo">
                <img :src="(jobFairOutVoList.companyInfo.logo || require('../../../assets/img/qiye.png'))" alt="">
              </div>
              <div class="job_information">
                <p class="titleName">{{jobFairOutVoList.name || '暂无'}}</p>
                <p>{{jobFairOutVoList.educationText || '不限学历'}}
                  {{jobFairOutVoList.workExpText ? ('| '  + jobFairOutVoList.workExpText) : ''}}
                </p>
                <p>{{(jobFairOutVoList.companyInfo ? jobFairOutVoList.companyInfo.name : '暂无')}}</p>
              </div>
              <div class="job_salary">
                {{jobFairOutVoList.minWageText }}-{{jobFairOutVoList.maxWageText }}
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs> -->
      <div class="titleTab">
        <div class="titleNameTab">
          <span class="" v-for="(item, key, index) in companyList" :key="key">
            <span @click="typeVal(index)" @mouseenter="enter(index)" :class="{'titleLine':index==typeIndex}">{{key}}
            </span>
            <transition name="fade">
              <div class="company_position" v-show="index == typeIndex">
                <div class="company_position_info" @click=" jobToDetais(jobFairOutVoList, index)"
                  v-for="(jobFairOutVoList, index) in companyList[key]" :key="index">
                  <div class="job_logo">
                    <img
                      :src="((jobFairOutVoList.companyInfo&&jobFairOutVoList.companyInfo.logo) || require('../../../assets/img/qiye.png'))"
                      alt="">
                  </div>
                  <div class="job_information">
                    <p class="titleName">{{jobFairOutVoList.name || '暂无'}}</p>
                    <p>{{jobFairOutVoList.educationText || '学历不限'}}
                      {{jobFairOutVoList.workExpText ? ('| '  + jobFairOutVoList.workExpText) : ''}}
                    </p>
                    <p>{{jobFairOutVoList.companyInfo.name || '暂无'}}</p>
                  </div>
                  <div class="job_salary">
                    {{jobFairOutVoList.wageText}}
                  </div>
                </div>
              </div>
            </transition>
          </span>
        </div>
      </div>
    </div>
    <div class="seeMore" v-if="true" @click="manyJob()">查看更多</div>
  </div>
</template>

<script>
import { listPageHotJob } from '../../../api/homeIndex';
export default {
  data () {
    return {
      // 热门公司
      companyList: [],
      index: '0',
      slideActive: -1,
      activeName: '1',
      typeIndex: 0,
      // 标签
      tableTabs: [],
      queryHotJob: {
        arr: [{ column: "us_company_trade", type: "", value: "200000000" }],
        sort: [{ column: "create_time", type: "desc" }]
      }
    };
  },
  methods: {
    // 定时循环
    timeout () {
      setInterval(() => {
        if (this.tableTabs.length - 1 == this.typeIndex) {
          this.typeIndex = "1"
        }
        this.typeIndex = JSON.stringify(this.typeIndex - 0 + 1)
      }, 5000)
    },
    handleClick (tab) { },
    // 热门职位类目请求 暂时不用这个请求了
    findParent () {
      findParent().then((res) => {
        if (res.success) {
          let datas = res.data
          // this.tableTabs = datas
          console.log(datas, ' 热门职位类目请求成功')
          // setTimeout(() => {
          //   this.timeout()
          // }, 5000)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    jobToDetais (obj) {
      const { href } = this.$router.resolve({
        path: '/JobHunting/jobdetail',
        query: {
          id: obj.id,
          category: obj.category
        },
      });
      window.open(href, '_blank');
      // this.$router.push({
      //   path: '/JobHunting/jobdetail',
      //   query: { id: obj.id }
      // })
    },
    // 热门职位
    listPageHotJob (id) {
      // let forFata = new FormData()
      // this.queryHotJob.arr[0].value = id
      // forFata.append('condition', JSON.stringify(this.queryHotJob.arr))
      // forFata.append('size', 9)
      // forFata.append('page', 1)
      // forFata.append('sort', JSON.stringify(this.queryHotJob.sort))
      // [{ column: "name", type: "asc" }, { column: "company_id", type: "desc" }]
      listPageHotJob().then((res) => {
        if (res.success) {
          let data = res.data
          // console.log(data, '热门职位')
          this.tableTabs = Object.keys(data)
          this.companyList = data
          // setTimeout(() => {
          //   this.timeout()
          // }, 5000)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 跳转
    manyJob () {
      this.$router.push({
        path: '/JobHunting',
        query: { all: 'all' }
      })
    },
    // 点击热门职位
    typeVal (index) {
      // this.typeIndex = index
    },
    enter (index) {
      this.typeIndex = index
    }
  },
  created () {
    // this.findParent()
    this.listPageHotJob()
    // this.timeout()
  }
}
</script>

<style scoped>
.header_hot {
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
}
.hot_name {
    width: 100%;
    height: 55px;
    /* display: flex;
    align-items: center;
    justify-content: left; */
    margin: 0 auto;
}
.hot_name span {
    width: 50px;
    height: 0px;
    border: 1px solid rgba(204, 204, 204, 1);
    opacity: 1;
}
.hot_posts {
    text-align: center;
    margin: 0 30px;
}
.tabs {
    height: 428px;
    /* background: #ffffff; */
}

.tabs /deep/ .el-tabs__item.is-active {
    color: rgba(48, 58, 64, 1);
}
.tabs /deep/ .el-tabs__active-bar {
    height: 4px;
    background-color: rgba(48, 58, 64, 1);
}
.tabs /deep/ .el-tabs__item {
}
.tabs /deep/ .el-tabs__nav-wrap::after {
    background-color: #ffffff;
}
.tabs /deep/ .el-tabs__nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.tabs /deep/ .el-tabs__content {
    background: #f6f6f8;
}

.swiper-container {
    width: 100%;
    height: 100%;
    height: 50px;
    background: #fff;
}
.swiper-slide {
    text-align: center;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    background: #fff;
    cursor: pointer;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-container .swiper-slide-active {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    position: relative;
}
.swiper-container .swiper-slide-active::after {
    /* width: 100%; */
    display: inline-block;
    height: 4px;
    content: '';
    position: absolute;
    bottom: 0px;
    background: #000;
}

.company_position {
    /* display: flex;
    flex-wrap: wrap;
    margin-right: -10px; */
    /* justify-content: space-between; */

    display: flex;
    -ms-flex-wrap: wrap;
    width: 1200px;
    flex-wrap: wrap;
    position: absolute;
    height: 356px;
    margin-right: -10px;
    left: 0;
    justify-content: space-between;
}
.company_position_info {
    width: calc(32.5% - 48px);
    /* height: 130px; */
    padding: 0 20px;
    margin-top: 16px;
    display: flex;
    margin-right: 10px;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    cursor: pointer;
    /* border: 1px solid green; */
    border: 1px solid rgb(245, 245, 245);
}

.job_logo {
    width: 68px;
    height: 68px;
    border-radius: 5px;
    background: rgba(242, 242, 242, 1);
}
.job_logo img {
    width: 100%;
    height: 100%;
}
.job_information {
    /* height: 87px; */
    /* width: 168px; */
    width: 120px;
}
.job_information p {
    line-height: 35px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(85, 85, 85, 1);
}
.job_information .titleName {
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
}
.job_salary {
    /* width: 90px; */
    width: 132px;
    text-align: right;
    white-space: nowrap;
}
.job_salary {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: rgba(253, 78, 64, 1);
    opacity: 1;
}
.seeMore {
    width: 340px;
    height: 40px;
    margin: 30px auto;
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(24, 147, 252, 1);
    cursor: pointer;
}

/* 热门分类 列表 */

.titleNameTab {
    width: 1190px;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.titleNameTab span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 50px;
    color: rgba(24, 147, 252, 1);
    opacity: 1;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
}
.titleLine {
    position: relative;
    font-weight: 600 !important;
}
.titleLine::before {
    content: '';
    width: 100%;
    transition: 3s;
    height: 4px;
    position: absolute;
    bottom: -16px;
    background: rgba(24, 147, 252, 1);
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.9s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
.divider {
    color: rgba(24, 147, 252, 1);
    background: rgba(24, 147, 252, 1);
}
</style>